<template>
    <div style="width: 100%;height: 100%" >
      <returnActionList></returnActionList>

      <div class="fd itemcenter">
        <div class="bc-w" style="width: 60%;height: 90%">

          <el-scrollbar style="height: 300px">
            <template v-for="(item,index) of staffmassage ">
              <div class="fr between m10">
                <div class="fs20">{{item.name}}</div>
                <div   :class="['fs18',item.jurisdiction==='3'?'c-dimgrey':'c-g']" >{{jurisdiction[item.jurisdiction]}}</div>
              </div >
              <div class="fr between m10">
                <div class="fs18 c-o">电话：{{item.phone}}</div>
                <div> <el-button type="danger" @click="deleteUser(item.name,index)">删除</el-button></div>
              </div>
            </template>
          </el-scrollbar>
          <div style="width: 60%" class="fr between m-top30">
            <el-button type="success"   @click="dialogFormVisible = true">添加</el-button>

            <!--<el-pagination-->
            <!--background-->
            <!--layout="prev, pager, next"-->
            <!--:total="100">-->
            <!--</el-pagination>-->
          </div>
        </div>



        <el-dialog title="添加管理员" :visible.sync="dialogFormVisible"  :modal="false" width="30%">
          <el-form label-position="left" label-width="100px">
            <el-form-item label="管理员姓名">
              <el-input v-model="messageUser.name" ></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
              <el-input v-model="messageUser.phone"></el-input>
            </el-form-item>
            <el-form-item label="权限">
              <el-select v-model="messageUser.jurisdiction" placeholder="请选择权限">
                <el-option label="管理员" value="1"></el-option>
                <el-option label="财务" value="2"></el-option>
                <el-option label="员工" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmitMsssage">确 定</el-button>
          </div>
        </el-dialog>
      </div>



    </div>
</template>

<script>
    export default {
        name: "StaffMassage",
      data(){
          return{
            staffmassage:[
              {name:"管理员A", phone:'1578955555', jurisdiction:'1'},
              {name:"管理员B", phone:'1578955556', jurisdiction:'1'},
              {name:"员工A", phone:'1578955557', jurisdiction:'3'},
              {name:"员工B", phone:'1578955555', jurisdiction:'3'},
              {name:"财务A", phone:'1578955558', jurisdiction:'2'},


            ],
            jurisdiction:{
              '1':'管理员',
              '2':'财务',
              '3':'员工'
            },
            messageUser: {
              name: '',
              phone: '',
              jurisdiction:'3'
            },

            dialogFormVisible:false
          }
      },
      methods:{
        onSubmitMsssage:function () {
          dialogFormVisible:false
          console.log('messageUser',this.messageUser)
          if(this.messageUser===undefined||this.messageUser==null||this.messageUser.name ===""||this.messageUser.phone===""){
            this.$alert('提示', '用户名和手机号码不能为空', {
              confirmButtonText: '确定'
            });
            return
          }
          this.staffmassage.push({name:this.messageUser.name,phone:this.messageUser.phone,jurisdiction:this.messageUser.jurisdiction})
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.messageUser={
            name: '',
              phone: '',
              jurisdiction:'3'
          },
          this.dialogFormVisible=false
        },
        deleteUser:function (user,index) {
          this.$confirm('确定删除 '+user+' ?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
  console.log(index)
            this.staffmassage.splice(index,1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      }
    }
</script>

<style scoped>

</style>
